<template>
  <div class="hamburger-container">
    <SvgIcon
      iconName="ant-design:bars-outlined"
      customClass="hamburger-icon"
      @click="switchHandler"
      :class="{ 'rotate-180': menuCollapse }"
    />
  </div>
</template>

<script lang="ts" setup>
// 接受子组件传递过来的参数
const { menuCollapse } = defineProps({
  menuCollapse: {
    type: Boolean,
    default: false
  }
});

//通过defineEmits接受父组件传递过来的事件
const emit = defineEmits<{ (e: "togleStatusEvent"): void }>();

const switchHandler = () => {
  console.log("1.点击事件=====emit");
  emit("togleStatusEvent"); //  子组件发射事件通知父组件
};
</script>

<style lang="scss" scoped>
.hamburger-container {
  @apply leading-[50px]; // leading-[50px] 等于line-height:50px
  @apply float-left; // float:left
  cursor: pointer;
}

.hamburger-icon {
  // @apply调用unocss中的原子样式w-，h-并都传值了30px，
  @apply w-30px h-30px transition-transform duration-300; //  等价于 width:30px height:30px transition-duration: 300ms;的写法
}

.hamburger-icon:hover {
  background-color: gray;
  opacity: 0.6;
  width: 35px;
  height: 35px;
}
</style>
